<template>
  <view :data-theme="theme()" :class="theme() || ''">
    <view class="top-tabbar">
      <view
        :class="state_active == 0 ? 'tab-item active' : 'tab-item'"
        @click="stateFunc(0)"
        >未使用</view
      >
      <view
        :class="state_active == 1 ? 'tab-item active' : 'tab-item'"
        @click="stateFunc(1)"
        >已使用</view
      >
      <view
        :class="state_active == 2 ? 'tab-item active' : 'tab-item'"
        @click="stateFunc(2)"
        >已过期</view
      >
    </view>

    <!--列表-->
    <scroll-view
      scroll-y="true"
      class="scroll-Y"
      :style="'height:' + scrollviewHigh + 'px;'"
      lower-threshold="50"
      @scrolltoupper="scrolltoupperFunc"
      @scrolltolower="scrolltolowerFunc"
    >
      <view class="">
        <template v-if="listData && listData.length > 0">
          <view class="item-wrap mb20" v-for="(v, idx) in supList" :key="idx">
            <view class="d-f" v-if="v.name && v.list && v.list.length > 0">
              <text class="icon iconfont icon-dianpu1"></text>
              <view class="con_tit">{{ v.name }}</view>
            </view>
            <template v-for="(item, index) in v.list" :key="index">
              <view
                style="background-color: #ffffff; border-radius: 15rpx"
                class="mb20"
              >
                <view
                  :class="
                    item.isExpire == 0 && item.isUse == 0
                      ? 'coupon-item coupon-item-' + item.colorText
                      : 'coupon-item coupon-item-gray'
                  "
                >
                  <image
                    v-if="item.isUse == 1"
                    class="coupon-disabled"
                    src="/static/coupon-status1.png"
                    mode=""
                  ></image>
                  <image
                    v-if="item.isExpire == 1"
                    class="coupon-disabled"
                    src="/static/coupon-status2.png"
                    mode=""
                  ></image>
                  <view class="operation d-b-c">
                    <view class="flex-1 coupon-content">
                      <view class="mb20 text-ellipsis">
                        <text class="f40 fb">{{ item.name }}</text>
                      </view>
                      <view class="f22 gray9 mb20">
                        <template v-if="item.expireType == 10">
                          有效期：领取{{ item.expireDay }}天内有效
                        </template>
                        <template v-if="item.expireType == 20">
                          有效期：{{ item.startTimeText }}至{{
                            item.endTimeText
                          }}
                        </template>
                      </view>
                      <view v-if="item.bigPrice != 0" class="f22"
                        >(最大优惠{{ item.bigPrice }}元)</view
                      >
                    </view>
                    <view class="right-box d-c-c d-c">
                      <view
                        class="theme-price mb10"
                        v-if="item.couponType == 10"
                      >
                        <text class="f24">￥</text>
                        <text class="f52 fb">{{ item.reducePrice * 1 }}</text>
                      </view>
                      <view
                        class="mb10 theme-price"
                        v-if="item.couponType == 20"
                      >
                        <text class="f52 fb">{{ item.discount / 10 }}</text>
                        <text class="f24">折</text>
                      </view>
                      <view class="f24 mb10">{{
                        item.minPrice > 0
                          ? "满" + item.minPrice * 1 + "元可用"
                          : "无门槛"
                      }}</view>
                      <template v-if="item.isExpire == 0 && item.isUse == 0">
                        <view
                          v-if="item.applyRange != 10"
                          class="f26 coupon-btn theme-btn"
                          @click.stop="
                            gotoPage(
                              '/pages/coupon/detail?couponId=' +
                                item.couponId +
                                '&applyRange=' +
                                item.applyRange
                            )
                          "
                        >
                          去使用
                        </view>
                        <view
                          v-else
                          class="f26 coupon-btn theme-btn"
                          @click.stop="gotoPage('/pages/index/index')"
                          >去使用</view
                        >
                      </template>
                    </view>
                  </view>
                </view>
                <view
                  class="range_item d-b-c"
                  v-if="item.applyRange == 20"
                  @click.stop="
                    gotoPage(
                      '/pages/coupon/detail?couponId=' +
                        item.couponId +
                        '&applyRange=' +
                        item.applyRange
                    )
                  "
                >
                  <view class="gray9 f24">
                    限指定部分商品
                    <text
                      class="icon iconfont icon-jiantou"
                      style="color: #999999; font-size: 22rpx"
                    ></text>
                  </view>
                  <view class="gray9 f24">本券不支持转赠</view>
                </view>
                <view
                  class="range_item d-b-c"
                  v-else-if="item.applyRange == 30"
                  @click.stop="
                    gotoPage(
                      '/pages/coupon/detail?couponId=' +
                        item.couponId +
                        '&applyRange=' +
                        item.applyRange
                    )
                  "
                >
                  <view class="gray9 f24">
                    限指定分类商品
                    <text
                      class="icon iconfont icon-jiantou"
                      style="color: #999999; font-size: 22rpx"
                    ></text>
                  </view>
                  <view class="gray9 f24">本券不支持转赠</view>
                </view>
                <view class="range_item d-b-c" v-else>
                  <view class="gray9 f24">
                    全场通用
                    <text
                      class="icon iconfont icon-jiantou"
                      style="color: #999999; font-size: 22rpx"
                    ></text>
                  </view>
                  <view class="gray9 f24">本券不支持转赠</view>
                </view>
              </view>
            </template>
          </view>
        </template>
        <view class="d-c-c p30" v-if="listData.length == 0 && !loading">
          <text class="iconfont icon-wushuju"></text>
          <text class="cont">亲，暂无相关记录哦</text>
        </view>
        <uni-load-more v-else :loadingType="loadingType"></uni-load-more>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import uniLoadMore from "@/components/uni-load-more.vue";
export default {
  components: {
    uniLoadMore,
  },
  data() {
    return {
      /*手机高度*/
      phoneHeight: 0,
      /*可滚动视图区域高度*/
      scrollviewHigh: 0,
      /*状态选中*/
      state_active: 0,
      /*列表*/
      /*当前第几页*/
      page: 1,
      /*一页多少条*/
      last_page: 0,
      list_rows: 10,
      listData: [],
      no_more: false,
      loading: false,
      data_type: "not_use",
      supList: [],
    };
  },
  mounted() {
    /*初始化*/
    this.init();
  },
  onShow() {
    this.initData();
    /*获取数据*/
    this.getData();
  },
  computed: {
    /*加载中状态*/
    loadingType() {
      if (this.loading) {
        return 1;
      } else {
        if (this.listData.length != 0 && this.no_more) {
          return 2;
        } else {
          return 0;
        }
      }
    },
  },
  methods: {
    /*初始化*/
    init() {
      let self = this;
      uni.getSystemInfo({
        success(res) {
          self.phoneHeight = res.windowHeight;
          // 计算组件的高度
          let view = uni.createSelectorQuery().select(".top-tabbar");
          view
            .boundingClientRect((data) => {
              let h = self.phoneHeight - data.height;
              self.scrollviewHigh = h;
            })
            .exec();
        },
      });
    },
    initData() {
      this.listData = [];
      this.page = 1;
      this.no_more = false;
    },
    /*获取数据*/
    getData() {
      let self = this;
      self.loading = true;
      let data_type = self.data_type;
      self._postBody(
        "user/coupon/lists",
        {
          pageIndex: self.page,
          pageSize: self.list_rows,
          dataType: data_type,
        },
        function (res) {
          self.loading = false;
          self.listData = self.listData.concat(res.data.records);
          self.getSup();
          self.last_page = res.data.lastPage;
          if (res.data.lastPage <= 1) {
            self.no_more = true;
            return false;
          }
        }
      );
    },

    /*可滚动视图区域到底触发*/
    scrolltolowerFunc() {
      let self = this;
      if (self.no_more) {
        return;
      }
      self.page++;
      if (self.page <= self.last_page) {
        self.getData();
      } else {
        self.no_more = true;
      }
    },
    /*状态切换*/
    stateFunc(e) {
      let self = this;
      if (self.state_active != e) {
        if (e == 0) {
          self.data_type = "not_use";
        }
        if (e == 1) {
          self.data_type = "is_use";
        }
        if (e == 2) {
          self.data_type = "is_expire";
        }
        self.state_active = e;
        self.initData();
        self.getData();
      }
    },

    /*可滚动视图区域到顶触发*/
    scrolltoupperFunc() {
      console.log("滚动视图区域到顶");
    },
    /*查看规则*/
    lookRule(item) {
      item.rule = true;
    },

    /*关闭规则*/
    closeRule(item) {
      item.rule = false;
    },
    /* 优惠券分类 */
    getSup() {
      let self = this;
      let supList = [];
      let platformCoupon = {
        name: "平台优惠券",
        list: [],
      };
      self.listData.forEach((item, index) => {
        console.log(index);
        if (item.supplier == null) {
          platformCoupon.list.push(item);
        } else {
          if (supList == "") {
            supList.push({
              name: item.supplier.name,
              list: [item],
            });
          } else {
            let flag = true;
            supList.forEach((sup_item, sup_index) => {
              if (sup_item.name === item.supplier.name) {
                flag = false;
                sup_item.list.push(item);
              }
            });
            if (flag) {
              supList.push({
                name: item.supplier.name,
                list: [item],
              });
            }
          }
        }
      });
      console.log(supList);
      supList.push(platformCoupon);
      self.supList = supList;
    },
  },
};
</script>

<style lang="scss">
.d-f {
  display: flex;
  align-items: center;
  /* padding-left: 30rpx; */
  padding: 20rpx 0;
}

.con_tit {
  font-weight: 800;
  font-size: 31rpx;
  margin-left: 15rpx;
}

.item-wrap {
  background: none;
}
</style>
